<template>
  <div class="container">
    <!-- 顶部横幅区域 -->
    <div class="banner-section">
      <div class="banner-content">
        <h1 class="banner-title">热门电影</h1>
        <p class="banner-subtitle">发现最新、最热门的电影</p>
      </div>
      <el-carousel :interval="3000" type="card" height="500" class="banner-carousel">
        <el-carousel-item v-for="item in BannerList" :key="item.id" class="banner-item">
          <div class="banner-card">
            <img @click="goToDetail(item.id)" :src="item.photo" alt="电影海报" class="banner-image">
            <div class="banner-info">
              <h3 class="banner-movie-title">{{ item.name }}</h3>
              <p class="banner-movie-intro">{{ item.intro }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 分类筛选区域 -->
    <div class="filter-section">
      <div class="filter-title">电影分类</div>
      <div class="filter-tags">
        <el-tag 
          v-for="(tag, index) in movieTags" 
          :key="index"
          :class="{ 'active-tag': activeTag === index }"
          @click="filterByTag(index)"
        >
          {{ tag }}
        </el-tag>
      </div>
    </div>

    <!-- 电影列表区域 -->
    <div class="movie-section">
      <h2 class="section-title">正在热映</h2>
      <div class="movie-list">
        <el-card 
          v-for="item in filmStore.searList" 
          :key="item.id" 
          class="movie-card"
          @click="goToDetail(item.id)"
          v-slide-in
        >
          <div class="movie-poster">
            <img :src="item.photo" alt="电影海报" class="poster-image" />
            <div class="movie-rating">
              <el-rate 
                v-model="item.rating" 
                disabled 
                text-color="#ff9900"
                score-template="{value}" 
                :max="5"
              ></el-rate>
            </div>
          </div>
          <div class="movie-info">
            <h3 class="movie-title">{{ item.name }}</h3>
            <p class="movie-intro">{{ item.type }}</p>
            <div class="movie-meta">
              <span class="movie-length"><i class="el-icon-time"></i> {{ item.movieLength }}分钟</span>
              <span class="movie-date">{{ formatTime(item.time) }}</span>
            </div>
            <el-button type="danger" size="small" class="buy-ticket-btn">购票</el-button>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 加载更多区域 -->
    <div class="load-more">
      <el-button type="primary" @click="getMoreFilm" class="load-more-btn">
        <i class="el-icon-plus"></i> 查看更多电影
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { reqBanner } from "@/api/moive";
import { Records } from "@/api/moive/type.ts";
import qs from "qs";
import { formatTime } from "@/util/common.ts";
import useFilmStore from "@/store/modules/film.ts";
import "@/util/vSlideIn.ts";
import { useRouter } from "vue-router";

let $router = useRouter();
let filmStore = useFilmStore();
let BannerList = ref<Records>([]);
let pageSize = ref(24);

// 电影分类标签
const movieTags = ref(['全部', '动作', '喜剧', '爱情', '科幻', '恐怖', '动画', '剧情']);
const activeTag = ref(0);

onMounted(() => {
  getAll();
  getAllFilm();
});

const getAll = async () => {
  let result: any = await reqBanner();
  if (result.code === 200) {
    BannerList.value = result.data;
  }
};

const getAllFilm = async () => {
  let data = qs.stringify({
    name: "",
    page: 1,
    pageSize: pageSize.value
  });
  console.log("data", data)
  await filmStore.searchFilm(data);
};

const getMoreFilm = () => {
  pageSize.value += 24;
  if (activeTag.value === 0) {
    getAllFilm();
  } else {
    const category = movieTags.value[activeTag.value];
    getFilmByType(category);
  }
};

const goToDetail = (id: any) => {
  $router.push({
    path: "/detail",
    query: {
      id: id
    }
  });
};

// 根据标签筛选电影
const filterByTag = (index: number) => {
  activeTag.value = index;
  if (index === 0) {
    // 全部电影
    getAllFilm();
  } else {
    // 按分类筛选的逻辑
    const category = movieTags.value[index];
    getFilmByType(category);
  }
};

// 根据电影类型获取电影列表
const getFilmByType = async (type: string) => {
  let data = qs.stringify({
    type: type,
    name: "",
    page: 1,
    pageSize: pageSize.value
  });
  await filmStore.searchFilmByType(data);
};
</script>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 60px;
}

/* 顶部横幅区域样式 */
.banner-section {
  position: relative;
  width: 100%;
  padding: 30px 0;
  background: linear-gradient(to bottom, #1a237e, #283593);
  color: white;
  text-align: center;
}

.banner-content {
  margin-bottom: 20px;
}

.banner-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.banner-subtitle {
  font-size: 1.2rem;
  opacity: 0.8;
}

.banner-carousel {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
}

.banner-item {
  border-radius: 8px;
  overflow: hidden;
}

.banner-card {
  position: relative;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s;
}

.banner-card:hover {
  transform: scale(1.02);
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.banner-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  text-align: left;
}

.banner-movie-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.banner-movie-intro {
  font-size: 0.9rem;
  opacity: 0.9;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 分类筛选区域样式 */
.filter-section {
  width: 80%;
  max-width: 1200px;
  margin: 30px auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.filter-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.el-tag {
  cursor: pointer;
  padding: 8px 16px;
  font-size: 14px;
  transition: all 0.3s;
}

.el-tag:hover {
  transform: translateY(-2px);
}

.active-tag {
  background-color: #409EFF;
  color: white;
}

/* 电影列表区域样式 */
.movie-section {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
  position: relative;
  padding-left: 15px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 25px;
  background-color: #ff5252;
  border-radius: 3px;
}

.movie-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 25px;
  margin-bottom: 40px;
}

.movie-card {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  background-color: white;
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.movie-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.movie-poster {
  position: relative;
  overflow: hidden;
  height: 300px;
}

.poster-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.movie-card:hover .poster-image {
  transform: scale(1.05);
}

.movie-rating {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 5px 10px;
  border-radius: 20px;
  color: white;
}

.movie-info {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.movie-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.movie-intro {
  font-size: 0.9rem;
  color: #666;
  text-indent: 2em;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.movie-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #999;
  margin-bottom: 15px;
}

.movie-length, .movie-date {
  display: flex;
  align-items: center;
}

.buy-ticket-btn {
  margin-top: auto;
  width: 100%;
  border-radius: 20px;
  font-weight: bold;
  transition: all 0.3s;
}

.buy-ticket-btn:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* 加载更多区域样式 */
.load-more {
  text-align: center;
  margin: 30px 0;
}

.load-more-btn {
  padding: 12px 30px;
  font-size: 1rem;
  border-radius: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.load-more-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .movie-list {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 768px) {
  .banner-section, .filter-section, .movie-section {
    width: 90%;
  }
  
  .movie-list {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
  }
  
  .movie-poster {
    height: 240px;
  }
  
  .banner-title {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .movie-list {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .movie-poster {
    height: 200px;
  }
  
  .banner-title {
    font-size: 1.5rem;
  }
  
  .banner-subtitle {
    font-size: 1rem;
  }
}
</style>